<template>
  <div class="container">
   <el-card>
       <el-form :inline="true">
         <el-form-item label="关键字" style=" margin-left:55px;">
           <el-input placeholder="根据文章标题搜索" v-model="form.title"></el-input>
         </el-form-item>
         <el-form-item label="状态">
           <el-select v-model="form.status" placeholder="请选择">
             <el-option
               v-for="item in options"
               :key="item.value"
               :label="item.label"
               :value="item.value">
             </el-option>
           </el-select>
         </el-form-item>
         <el-form-item>
           <el-button size="small" @click="onClear">清除</el-button>
           <el-button type="primary" size="small" @click="onSearch">搜索</el-button>
         </el-form-item>
       <el-button type="success" icon="el-icon-edit" size="small" style="float:right ; margin-right : 20px;" @click="showAdd()">新增技巧</el-button>
       <!-- //新增  ，修改 -->
       <questionsNew 
         :typeUse="typeUse"
         :show-dialog.sync="showDialog" 
         :visible="showDialog" 
         :objItem = "objItem"
         @successFn="listFn"/>
       </el-form>
       <!-- // 这些提出去行内样式都改了 -->
         <el-row style="background-color: #f4f4f5;color: #909399;font-size: 13px;margin-top: -2px;height: 40px;line-height: 40px;padding-left: 10px;"> 
     <i class="el-icon-info"></i>
     <span style="margin-left: 8px;">数据一共{{page.total}}条</span>
    </el-row>
       <!-- v-model="state" -->
       <el-table
       border
       :data="lists"
       style="margin-top: 20px;">
       <el-table-column
         type="index"
         width="50"
         label="序号">
       </el-table-column>
       <el-table-column
         label="文章标题" prop="title" class="titleicon"
         >
         <!-- <video :src="lists.videoURL" v-if="!isshow&&lists.videoURL===''" width-="400px" height="300px" autoplay="autoplay" controls="controls"></video> -->
        <!-- <a href="#" class="el-icon-film"></a> -->
       </el-table-column>
       <el-table-column
         label="阅读数" prop="visits">
       </el-table-column>
       <el-table-column
         label="录入人" prop="username">
         <template></template>
       </el-table-column>
       <el-table-column
         label="录入时间" prop="createTime"
         >
         <template></template>
       </el-table-column>
       <el-table-column
         label="状态" prop="state">
         <template v-slot="{row}">{{row.state===1?'已启用':'已禁用'}}</template>
       </el-table-column>
       <el-table-column
         label="操作">
         <template slot-scope="scope">
               <el-button type="text"  @click="previeww(scope.row)" >预览
               </el-button>
               <el-button type="text" @click="handleStatus(scope.row)">
               <!-- <span v-if="!scope.row.state">启用</span>
               <span v-else>禁用</span> -->
               <!-- // 简写 -->
               <!-- // 1 启用  0 禁用 und  0 ''-->  
                 {{scope.row.state ? '禁用' : '启用'}}
               </el-button>
               <el-button type="text"
               v-if="scope.row.status!='deleted'"
               :disabled="scope.row.state===1"
               @click="showUpdate(scope.row)"
               >修改</el-button>
               <el-button type="text"
               v-if="scope.row.status!='deleted'"
               :disabled="scope.row.state===1"
                @click="onDel(scope.row)">删除</el-button>
             </template>
       </el-table-column>
     </el-table>
     <el-row type="flex" justify="end">
       <el-pagination
       @current-change="handleCurrentChange"
       @size-change="handleSizeChange"
       :current-page="page.page" 
       :page-sizes="[10, 20, 30, 40]"
       :page-size="page.pageSize"
       background
       layout="prev, pager, next, sizes, jumper"
       :total="page.total"
       >
       </el-pagination>
     </el-row>
     </el-card>
     <previewNew :show-dialogPreview.sync="showDialogPreview" :visible="showDialogPreview" :previewp="previewp"></previewNew>
  </div>
 </template>
 
 <script>
 import { list, remove, update } from '../../api/hmmm/articles.js'
 import questionsNew from './components/questions-new.vue'
 import previewNew from './components/preview-new.vue'
 export default {
   components: {
     questionsNew,
     previewNew
   },
   data () {
     return {
       // isshow,
        form: {
          title: '',
          status: ''
       },
       previewp:{},
       lists: [],//列表数据
       objItem:{}, // 当前条数据
       showDialog: false, // 角色对话框
       showDialogPreview:false,//预览弹框
       //分页信息
       page: {
         total : 0, // 默认0条,总条数
         page: 1,//当前页数
         pageSize: 10,//页尺寸 .每页几条 10/20/50
         //总页数
         pages: 3,
         keyword:''//关键字
       },
       options: [{
           value: '选项1',
           label: '启用'
         }, {
           value: '选项2',
           label: '禁用'
         }],
         typeUse : '1' , // 页面用途类型 1 ： 新增  2 ：修改
     }
   },
 created () {
   this.onSearch()
   },
   methods: {
     previeww (row) {
       this.showDialogPreview = true
       console.log(row)
       this.previewp=row
     },
     listFn () {
       this.onSearch()
     },
     // 全部搜索 共用方法
     async onSearch () {
       const params = {
         title : this.form.title.trim(),
         value :  this.form.status,
         page: this.page.page, // 当前页，第几页  默认第一
         pagesize: this.page.pageSize, // 一页几条，一页默认 10条
       }
       let { data } = await list(params)
       // 列表
       this.lists = data.items
       // console.log(items);
       // 数据一共多少条 ？ counts
       this.page.total = data.counts;
       // 列表 []
       // this.lists = items
     },
     // 每页几条 10 / 20 / 30/ 40 
     handleSizeChange (val) {
       this.page.pageSize = val
       this.onSearch()
     },
     // 切换页数
     handleCurrentChange (val) {
       this.page.page = val
       this.onSearch()
     },
     // 视频弹框
     film () {
       console.log(1111)
     },
     //显示弹窗 修复
     showUpdate (row) {
       this.showDialog = true
       this.objItem = row
       this.typeUse = '2' // 1 :新增2 ： 修改
     },
     //显示弹窗 新增
     showAdd () {
       this.showDialog = true
       this.objItem = null
       this.typeUse = '1' // 1 :新增2 ： 修改
     },
     // 修改
     async updateDirShow (row) { 
       // { id : 1 , title : ''}
       try {
       
         const data = await update({ id: row.id })
         console.log(data)
        // 提示成功
        this.$message.success('操作成功')
         // 刷新列表
         this.onSearch()
         } catch (error) {
           console.log(error)
           
         }
     },
     // 启用/ 禁用
     handleStatus (item) { 
       // 数据一行 {}
        let status = ""; 
        if (item.state === 1) {
         item.state = 0;
          status = "禁用";
        } else {
         item.state = 1;
          status = "启用";
       }
       return this.$message.success(`${status}操作成功`)
      },
     // 删除
     async onDel (row) {
       // 确认删除
       this.$confirm('确认删除？', '提示', {
         confirmButtonText: '确认',
         cancelButtonText: '取消',
         type: 'warning'
       }).then(async action => {
         const data = await remove(row)
         // 提示成功
         this.$message.success('操作成功')
         // 刷新列表 
         this.page.page = 1 
         this.onSearch()
       }).catch((err) => {
         console.log(err)
       })
     },
 
   // 清除
   onClear(){
       this.form = {
         title: '',
         value: '',
     }
     this.page.page = 1
     this.onSearch()
     },
 
   },
 
 }
 </script>
 
 <style scoped lang='less'>
 .container{
   .cell::after{
     content: "\e763";
   }
 }
 </style>
 